/*
 * @Description: 存放当前的地址选择
 * @Author: yangrongxin
 * @Date: 2021-08-16 11:10:29
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 11:26:54
 */

import { useEffect, useReducer } from 'react';
import { PickerView, PickerViewColumn, View, Button } from '@tarojs/components';
import { AtFloatLayout } from 'taro-ui';
import city from '@/assets/city';
import styles from './index.module.less';

function reducer(state, action) {
  if (action.type === 'update') {
    return {
      ...state,
      ...action.payload,
    };
  }
}

const { provinces, citys, areas } = city;

const AddressPicker = (props: any) => {
  const { indexValue = [], title = '请选择您所在的地区', onChange, isOpened, onClose } = props;

  const [lists, updateLists] = useReducer(
    reducer,
    {
      provincesId: '', // 存储当前选中的省的id
      citysId: '', // 存储当前选中的市的id
      areasId: '', // 存储当前选中的区的id
      provincesIndex: 0, // 当前选中的省index
      citysIndex: 0, // 当前选中的市index
      areasIndex: 0, // 当前选中的区index
      cityLists: [],
      areaLists: [],
    },
    () => {
      const newProvincesId = indexValue[0] || provinces[0].id;
      const newCitysId = indexValue[1] || citys[provinces[0].id][0].id;
      const newAreasId = indexValue[2] || areas[citys[provinces[0].id][0].id][0].id;
      const newCityList = citys[newProvincesId];
      const newAreaList = areas[newCitysId];
      const newProvincesIndex = provinces.findIndex((item: any) => item.id === newProvincesId);
      const newCitysIndex = newCityList.findIndex((item: any) => item.id === newCitysId);
      const newAreasIndex = newAreaList.findIndex((item: any) => item.id === newAreasId);
      return {
        provincesId: newProvincesId,
        citysId: newCitysId,
        areasId: newAreasId,
        provincesIndex: [newProvincesIndex],
        citysIndex: [newCitysIndex],
        areasIndex: [newAreasIndex],
        cityLists: newCityList,
        areaLists: newAreaList,
      };
    },
  );

  /* 更换省 */
  const changeProvinces = (event: any) => {
    const {
      detail: { value },
    } = event;
    const provincesId = provinces[value].id;
    const citysId = citys[provincesId][0].id;
    const areasId = areas[citysId][0].id;

    updateLists({
      type: 'update',
      payload: {
        provincesId,
        citysId,
        areasId,
        provincesIndex: value,
        citysIndex: 0,
        areasIndex: 0,
        cityLists: citys[provincesId],
        areaLists: areas[citysId],
      },
    });
  };

  /* 更换市 */
  const changeCity = (event: any) => {
    const {
      detail: { value },
    } = event;
    const citysId = cityLists[value].id;
    const areasId = areas[citysId][0].id;
    updateLists({
      type: 'update',
      payload: {
        citysId,
        areasId,
        citysIndex: value,
        areasIndex: 0,
        areaLists: areas[citysId],
      },
    });
  };

  /* 更换区域 */
  const changeArea = (event: any) => {
    const {
      detail: { value },
    } = event;
    const areasId = areaLists[value].id;
    updateLists({
      type: 'update',
      payload: {
        areasId,
        areasIndex: value,
      },
    });
  };

  useEffect(() => {
    // 用户数据进行回显
  }, []);

  const { cityLists, areaLists, provincesId, citysId, areasId, provincesIndex, citysIndex, areasIndex } = lists;

  return (
    <View catchMove>
      <AtFloatLayout className={styles.container} isOpened={isOpened} onClose={onClose}>
        {title && <View className={styles.title}>{title}</View>}
        {/* 选择省 */}
        <PickerView
          indicatorClass={styles.indicatorClass}
          className={styles.pickerView}
          onChange={changeProvinces}
          value={provincesIndex}
        >
          <PickerViewColumn>
            {provinces.map(({ name, id }: { name: string; id: string }) => {
              return <View key={id}>{name}</View>;
            })}
          </PickerViewColumn>
        </PickerView>
        {/* 选择市 */}
        <PickerView
          indicatorClass={styles.indicatorClass}
          className={styles.pickerView}
          onChange={changeCity}
          value={citysIndex}
        >
          <PickerViewColumn>
            {cityLists.map(({ name, id }: { name: string; id: string }) => {
              return <View key={id}>{name}</View>;
            })}
          </PickerViewColumn>
        </PickerView>
        {/* 选择区 */}
        <PickerView
          indicatorClass={styles.indicatorClass}
          className={styles.pickerView}
          onChange={changeArea}
          value={areasIndex}
        >
          <PickerViewColumn>
            {areaLists.map(({ name, id }: { name: string; id: string }) => {
              return <View key={id}>{name}</View>;
            })}
          </PickerViewColumn>
        </PickerView>
        <Button
          onClick={() => {
            const valIds = [provincesId, citysId, areasId];
            const valStr = [provinces[provincesIndex].name, cityLists[citysIndex].name, areaLists[areasIndex].name];
            onChange && onChange(valStr, valIds);
          }}
        >
          确定
        </Button>
      </AtFloatLayout>
    </View>
  );
};

export default AddressPicker;

const getNameDescWithId = (provinceId, cityId, areaId) => {
  if (!provinceId) {
    return [];
  }
  const provinceName = provinces.find((fi: any) => fi.id === provinceId)?.name;
  const cityName = citys[provinceId].find((fi: any) => fi.id === cityId)?.name;
  const areaName = areas[cityId].find((fi: any) => fi.id === areaId)?.name;
  return [provinceName, cityName, areaName];
};

export { getNameDescWithId };
